<template>
  <li
    class="hot-list"
    :class="{ playa: item.id === currentPlaySongId, playing: playing }"
    @click="$emit('update:current-play-song', item)"

  >
    <div class="left">
      <span class="spana">{{ sum }}</span>
      <div class="sing">
        <p>
          {{ item.name }}<span v-for="o in item.alia" :key="o">({{ o }})</span>
        </p>
        <div class="n">
          <span class="sprite1"></span>
          <span class="song" v-for="d in item.ar" :key="d.id"
            >{{ d.name }}
          </span>
          <span>{{ item.al.name }} </span>
        </div>
      </div>
    </div>
    <!-- <div class="right sprite"></div> -->
    <div class="kz">
      <!-- <span class="play"> -->
      <div class="donghua">
        <span></span>
        <span></span>
        <span></span>
      </div>
      <span class="play">
          <svg
          t="1635923962993"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="1460"
          width="14"
          height="14"
        >
          <path
            d="M798.579835 553.363155L270.865448 897.201157c-28.647146 18.857264-67.084174 9.067382-67.084174-45.987159V174.194878c0-55.415791 35.836026-62.965921 67.084174-45.914909l527.714387 343.765752c29.550272 19.83264 30.417272 59.786919 0 81.317434zM259.37769 828.708107l500.692867-315.985606L259.37769 196.700769V828.708107z"
            fill="#ccc"
            p-id="1461"
          ></path>
        </svg>
      </span>
      <!-- </span> -->
    </div>
  </li>
</template>

<script>
export default {
  props: {
    item: Object,
    index: Number,
    playing: Boolean,
    currentPlaySongId: [Number, String],
  },
  computed: {
    sum: function () {
      if (this.index + 1 < 10) {
        return "0" + (this.index + 1);
      } else {
        return this.index + 1;
      }
    },
  },
};
</script>

<style lang="less" scoped>
@keyframes loading {
  from {
    // height: 20%;
    transform: scaleY(0.2);
  }
  to {
    // height: 100%;
    transform: scaleY(1);
  }
}
.hot-list {
  margin: 0;
  padding: 0 10px;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
  .left {
    width: 90%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .spana {
      width: 10%;
      padding-right: 5px;
      text-align: center;
      color: rgb(151, 151, 185);
      font-size: 16px;
    }

    .sing {
      flex: 1;
      p {
        font-size: 17px;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin: 10px 0 5px 0;
      }
      .n {
        font-size: 12px;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        color: rgb(151, 151, 185);
        .song {
          font-size: 12px;
          &::after {
            margin: 0 5px;
            content: "/";
          }
          &:nth-last-of-type(2) {
            //   background-color: red;
            &::after {
              content: "-";
            }
          }
        }
        .sprite1 {
          margin-right: 8px;
          padding: 0 15px;
          background: url("https://s3.music.126.net/mobile-new/img/index_icon_2x.png?5207a28c3767992ca4bb6d4887c74880=")
            no-repeat 0 0;
          width: 24px;
          height: 16px;
          zoom: 0.6;
        }
      }
    }
  }
}
.play{
    width: 23px;
      height: 23px;
      border: 1px solid #ccc;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
}

li:nth-of-type(1) > .left .spana {
  color: red;
}
li:nth-of-type(2) > .left .spana {
  color: red;
}
li:nth-of-type(3) > .left .spana {
  color: red;
}
.playa {
  .kz {
    width: 44px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 10px;
    border-radius: 50%;
    // border:1px solid #CCC;
    .play {
      display: none;
      justify-content: space-between;
    }
    .donghua {
      display: flex;
      height: 50%;
      width: 50%;
      justify-content: space-between;
      span {
        width: 20%;
        height: 100%;
        display: block;
        background: red;
        animation: loading 0.6s linear infinite alternate;
        animation-play-state: paused;
        transform-origin: bottom;
        &:nth-child(1) {
          animation-delay: -0.4s;
        }
        &:nth-child(2) {
          animation-delay: -0.2s;
        }
      }
    }
  }
}
&.playing {
  .kz {
    .donghua {
      span {
        animation-play-state: running;
      }
    }
  }
}
</style>